import {Outlet, useNavigate, NavLink, redirect} from "react-router-dom";
import React, {useEffect, useState} from 'react';
import {ConfigProvider, Layout, Menu, theme} from 'antd';
import AllRoute from "./allroutes"

const {Content, Sider} = Layout;
const items = AllRoute.map((itm, idx) => {
    return {
        key: idx,
        path: itm.path,
        label: (
            <NavLink to={itm.path}>
                {itm.name}
            </NavLink>
        )
    }
});
export default function RootMenubak() {
    const navigate = useNavigate();
    useEffect(() => {
        const path = items[0].path
        console.log("ddddddrr", path)
        navigate(path);
    }, [])
    return (
        <>
            <ConfigProvider
                theme={{
                    token: {
                        // colorPrimary: '#e0b96b',
                        // borderRadius: 2,
                        // 派生变量，影响范围小
                        // colorBgContainer: '#a6efef',
                    },
                    components:{
                        Table:{
                            fontSizeSM:9,
                            cellPaddingBlockSM:3
                        }
                    }
                }}
                // componentSize={'small'}
            >
                <Layout hasSider>
                    <Sider
                        theme={"light"}
                        style={{
                            overflow: 'auto',
                            height: '100vh',
                            position: 'fixed',
                            left: 0,
                            top: 0,
                            bottom: 0,
                        }}
                        width={138}
                    >
                        <Menu
                            mode="inline"
                            items={items}
                            defaultSelectedKeys={["0"]}
                        />
                    </Sider>
                    <Layout style={{ marginLeft: 138 }}>
                    <Content
                        style={{
                            margin: '0 0',
                            // overflow: 'hidden',
                            // background: "red",
                            // borderRadius: borderRadiusLG,
                        }}
                    >
                        <div style={{
                            // padding: 24,
                            // textAlign: 'center',
                            minHeight: 450,
                        }}
                        >
                            <Outlet/>
                        </div>
                    </Content>
                    </Layout>
                </Layout>
            </ConfigProvider>
        </>
    );
}